<template>
  <div id="app" v-show="showBody">
    <div class="imgBg">
      <!-- <img ref="appImg" src="https://www.ttzxh.icu/api/upload/showImg?avatar=public/images/b23f90d67a1e311c43161b998df9f980pizhikk.jpg&username=2628735401" alt="原神背景图"> -->
    </div>
    <live2d class="live2d"></live2d>

    <!-- <transition name="logo"> -->
    <!-- <Logo v-if="showLogo" class="logo"></Logo> -->
    <!-- </transition> -->
    <transition name="index">
      <router-view />
    </transition>
    <transition name="fadeInTranslateXLeftLabel">
      <left-label class="labelc" v-if="$route.path=='/index'"></left-label>
    </transition>
    <!-- <music-player style="position:absolute;bottom:10px;left:1%"></music-player> -->
    <!-- <div class="weatherBox">
    <weather></weather>
    </div>-->
    <!-- <BG></BG> -->
  </div>
</template>

<script>
// import BG from "./views/comment/user";
import live2d from './views/live2d/live2d'
import Logo from './views/comment/logo'
import LeftLabel from './views/index/leftLabel'
import musicPlayer from './components/music'
// import weather from "./components/weather"
export default {
  created() {
    this.listenMenu()
    this.devtool()
  },
  mounted() {
    // setTimeout(()=>{
    //   this.lowShow = true
    // },200)
    window.onload = () => {
      this.lowShow = true
    }

    // this.$refs.appImg.onload=()=>{
    this.showBody = true
    // }
  },
  methods: {
    listenMenu() {
      document.addEventListener('contextmenu', function (e) {
        e.preventDefault()
      })
    },
    devtool() {
      const devtools = () => {}
      console.log('%c', devtools)

      devtools.toString = () => {
        alert('别干坏事哟1！！')
      }
    }
  },
  components: {
    live2d,
    // BG,
    Logo,
    LeftLabel,
    musicPlayer
    // weather
  },
  data() {
    return {
      lowShow: false,
      Logo: true,
      showApp: false,
      showBody: false
    }
  },
  computed: {
    showLogo() {
      setTimeout(() => {
        this.Logo = false
      }, 1600)
      return this.Logo
    }
  }
}
</script>

<style>
@import url('./assets/reset.css');
@import url('./css/comment/animate.css');
#app {
  width: 100vw;
  height: 100vh;
  position: absolute;
  /* background-color: rosybrown; */
}
.imgBg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  background-image: url('https://www.ttzxh.icu/api/upload/showImg?avatar=public/images/46fb32500844c19c3ac186e24b63c44das27b-f0ac5.webp&username=2628735401');
  /* background-image: url("./assets/4k的副本.jpg"); */
  background-size: cover;
  background-position: right;
}
/* .imgBg img{
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
} */
.weatherBox {
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 9;
  width: 200px;
}

.logo-leave-active {
  transition: opacity 0.5s;
}

.logo-leave-to {
  opacity: 0;
}

.index-enter-active {
  transition: opacity 0.5s;
}

.index-enter {
  opacity: 0;
}

* {
  cursor: url('./assets/img/cur/mai1.png'), default;
}

*:active {
  cursor: url('./assets/img/cur/maia.png'), default;
}

@media screen and (min-width: 765px) {
  #app {
    min-width: 1000px;
  }
  .imgBg img {
    min-width: 1000px;
  }
  .labelc {
    position: absolute;
    top: 80px;
    left: 100px;
  }
}

@media screen and (max-width: 765px) {
  .labelc {
    display: none;
  }

  .live2d {
    display: none;
  }

  .logo {
    width: 100%;
  }

  .weatherBox {
    display: none;
  }
}

@font-face {
  font-family: 'iconfont'; /* Project id 1955890 */
  src: url('//at.alicdn.com/t/font_1955890_nhl5hu03h1r.woff2?t=1635924197159') format('woff2'),
    url('//at.alicdn.com/t/font_1955890_nhl5hu03h1r.woff?t=1635924197159') format('woff'),
    url('//at.alicdn.com/t/font_1955890_nhl5hu03h1r.ttf?t=1635924197159') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconbofang:before {
  content: '\e87c';
}

.iconzanting:before {
  content: '\e662';
}

.iconshibai:before {
  content: '\e64f';
}

.iconshangyishou:before {
  content: '\e603';
}

.iconxiayishou:before {
  content: '\e604';
}

.iconxiazai:before {
  content: '\e600';
}

.iconpdf:before {
  content: '\e621';
}

.iconyumingyuwangzhan:before {
  content: '\e72e';
}

.iconword:before {
  content: '\e66d';
}

.iconjieshi:before {
  content: '\e64e';
}

.iconremenhuida:before {
  content: '\e62f';
}

.iconwo:before {
  content: '\e67d';
}

.iconlishi1:before {
  content: '\e786';
}

.iconhuidingbu:before {
  content: '\e619';
}

.icondingbutishi:before {
  content: '\e60e';
}

.iconpinglun1:before {
  content: '\e620';
}

.iconshoucang1:before {
  content: '\e62b';
}

.iconchevronupshangjiantou:before {
  content: '\e6d6';
}

.iconchevronsupshuangshangjiantou:before {
  content: '\e6d7';
}

.iconchakanhenji:before {
  content: '\e602';
}

.iconlishi:before {
  content: '\e61b';
}

.icongerenxinxi:before {
  content: '\e607';
}

.icongerenxinxi1:before {
  content: '\e670';
}

.icontianchongxing-:before {
  content: '\e62a';
}

.iconqqfuben:before {
  content: '\e629';
}

.iconFont_Linear:before {
  content: '\e678';
}

.icongithub1:before {
  content: '\e76f';
}

.iconupload-fill:before {
  content: '\e63e';
}

.iconbianji:before {
  content: '\e62e';
}

.iconbiaoqing:before {
  content: '\e663';
}

.iconicon-test2:before {
  content: '\e606';
}

.iconwenjian:before {
  content: '\e793';
}

.iconpinglun:before {
  content: '\e695';
}

.iconshijian00:before {
  content: '\e6ce';
}

.iconlianxi1:before {
  content: '\e61a';
}

.iconcaidan:before {
  content: '\e648';
}

.iconpengyou:before {
  content: '\e63d';
}

.icondenglu:before {
  content: '\e611';
}

.iconweb-icon-:before {
  content: '\e6e5';
}

.iconshouye1:before {
  content: '\e630';
}

.iconliuyan:before {
  content: '\e655';
}

.iconsousuo:before {
  content: '\e67e';
}

.iconshanchu:before {
  content: '\e614';
}

.iconshoucang:before {
  content: '\e60f';
}

.icondianzan:before {
  content: '\e60c';
}

.iconyanjing:before {
  content: '\e60d';
}

.icongithub:before {
  content: '\e691';
}

.iconshouye:before {
  content: '\e61f';
}

.iconyifu:before {
  content: '\e666';
}

.iconicon-test:before {
  content: '\e617';
}

.iconicon-test1:before {
  content: '\e654';
}

.iconcuowu:before {
  content: '\e612';
}

.iconxingmingyonghumingnicheng:before {
  content: '\e623';
}

.iconmima:before {
  content: '\e668';
}
</style>